<template>
  <div class="project">
    <div class="in-box">
      <div class="all-h" style="width: 29.1%">
        <div class="info">
          <div>
            <p>
              <span>试验名称：</span>
              <span>{{ dataList.getInfo?.name }}</span>
            </p>
          </div>
          <div class="top-info">
            <el-button
              class="margin"
              :loading="resizeLoading"
              @click="resize(1)"
            >
              {{ resizeText }}
            </el-button>
            <p>
              <span>炉型：</span>
              <span>
                {{ dataList.furnaceSize[Number(dataList.getInfo?.burner)] }}
              </span>
            </p>
          </div>
        </div>
        <div class="table" id="tableBox">
          <el-table :data="videoList" :height="tableH">
            <el-table-column prop="id" label="序号" width="50" align="center" />
            <el-table-column
              prop="name"
              width="auto"
              label="模块名称"
              align="center"
            >
              <template #default="scope">
                <div class="name-column">
                  <span>{{ scope.row.name }}</span>
                  <div
                    class="deng-icon"
                    :class="{ 'deng-icon-kai': scope.row.is_light_on }"
                    @click="getClickDeng(scope.row)"
                  ></div>
                </div>
              </template>
            </el-table-column>

            <el-table-column
              prop="passage"
              label="通道"
              align="center"
            ></el-table-column>
            <el-table-column prop="location" label="位置" align="center">
              <template #default="scope">
                <span
                  v-if="!scope.row.isUpdate"
                  @dblclick="handleDblClick(scope.row, 'category')"
                >
                  {{ scope.row.location }}
                </span>
                <template v-else>
                  <el-select
                    v-model="scope.row.location"
                    size="small"
                    @change="handleChange(scope.row)"
                    ref="selectRef"
                    :popper-append-to-body="false"
                    class="w-full"
                  >
                    <el-option
                      v-for="item in statusOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </template>
              </template>
            </el-table-column>
            <el-table-column prop="connected" label="连接" align="center">
              <template #default="scope">
                <span v-if="scope.row.connected == true" class="connected">
                  正常
                </span>
                <span v-else class="connected connectedErr">异常</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div class="all-h" style="width: 50%">
        <div class="center-info">
          <el-checkbox
            v-model="radiusChecked"
            :disabled="!ifShowCircle"
            label="切圆显示"
          />
          <el-button
            class="margin"
            @click="updateCamera()"
            :loading="dialogCameraVisibleLoading"
          >
            镜头矫正
          </el-button>
          <el-button class="margin" @click="pictureRotation()">
            画面旋转
          </el-button>
          <el-button class="margin" @click="pictureignite()">点火</el-button>
          <span style="color: #606266; width: 5vw">摄像头:</span>
          <el-select
            v-model="cameraValue"
            placeholder="请选择摄像头"
            style="width: 15vw"
            @change="changeCamera"
            class="margin"
          >
            <el-option
              v-for="item in cameraOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <span style="color: #606266; width: 5vw">串口:</span>
          <el-select
            v-model="serialPortValue"
            placeholder="请选择串口"
            style="width: 15vw"
            @change="changeSerialPort"
            class="margin"
          >
            <el-option
              v-for="item in serialPortOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
        <div class="center-con-con" v-if="dataList.getInfo?.burner == 1">
          <div class="top">
            <div class="top-top">
              <div class="top-top-top">
                <div class="huibackgroud">后墙</div>
              </div>
              <div class="top-top-buttom">
                <template
                  v-for="(item, index) in filteredModules"
                  :key="item.module_db_id"
                >
                  <div
                    class="bj-module"
                    v-if="index == 0 || index == 1 || index == 2 || index == 3"
                  >
                    <div
                      class="filtered-modules-class"
                      v-if="filteredModules[index]"
                    >
                      <div>
                        {{
                          filteredModules[index]
                            ? filteredModules[index].name +
                              '-' +
                              filteredModules[index].passage
                            : ''
                        }}
                      </div>
                      <div
                        class="deng-icon"
                        :class="{
                          'deng-icon-kai': filteredModules[index].is_light_on,
                        }"
                        @click="getClickDeng(filteredModules[index])"
                      ></div>
                    </div>
                    <div class="sel-box">
                      <div
                        v-for="item in filteredModules"
                        :key="item.module_db_id"
                        :value="item.module_db_id"
                        @click="changeModuleFn(index, item.module_db_id)"
                      >
                        {{ item.name }}-{{ item.passage }}
                      </div>
                    </div>
                  </div>
                </template>
              </div>
            </div>
            <div class="center" :style="{height: jingtouH / 1.5 + 80 + 'px'}">
              <div class="left huibackgroud">左墙</div>
              <div class="center-center" id="centerBox2" :style="{height: jingtouH / 1.5 +'px'}">
                <cutCirle2
                  ref="cutCirle2Ref"
                  :imgFlag="imgFlag"
                  @changeImgFlag="changeImgFlagFn"
                  :isShowChecked="radiusChecked"
                  :cx="cx"
                  :cy="cy"
                  :rx="rx"
                  :ry="ry"
                  :cx2="cx2"
                  :cy2="cy2"
                  :rx2="rx2"
                  :ry2="ry2"
                  :scaling_ratio="scaling_ratio"
                ></cutCirle2>
              </div>
              <div class="right huibackgroud">右墙</div>
            </div>
            <div class="top-bottom">
              <div class="top-top-buttom">
                <template
                  v-for="(item, index) in filteredModules"
                  :key="item.module_db_id"
                >
                  <div
                    class="bj-module"
                    v-if="index == 4 || index == 5 || index == 6 || index == 7"
                  >
                    <div
                      class="filtered-modules-class"
                      v-if="filteredModules[index]"
                    >
                      <div>
                        {{
                          filteredModules[index]
                            ? filteredModules[index].name +
                              '-' +
                              filteredModules[index].passage
                            : ''
                        }}
                      </div>
                      <div
                        class="deng-icon"
                        :class="{
                          'deng-icon-kai': filteredModules[index].is_light_on,
                        }"
                        @click="getClickDeng(filteredModules[index])"
                      ></div>
                    </div>
                    <div class="sel-box">
                      <div
                        v-for="item in filteredModules"
                        :key="item.module_db_id"
                        :value="item.module_db_id"
                        @click="changeModuleFn(index, item.module_db_id)"
                      >
                        {{ item.name }}-{{ item.passage }}
                      </div>
                    </div>
                  </div>
                </template>
              </div>
              <div class="top-top-top">
                <div class="huibackgroud">后墙</div>
              </div>
            </div>
          </div>
          <div class="bottom">
            <el-button
              class="margin"
              type="success"
              :icon="iconStart"
              @click="clickStartRecording()"
              :disabled="ingFlag"
            >
              开始录制
            </el-button>
            <el-button
              class="margin"
              type="danger"
              :icon="iconStop"
              @click="clickStopRecording()"
              :disabled="!ingFlag"
            >
              结束录制
            </el-button>
            <el-button
              class="margin"
              :icon="iconIdentify"
              type="primary"
              @click="clickCircularPatternRecognition('double')"
              :loading="dialogQYSBVisible"
              v-if="!ifShowCircleButton"
            >
              切圆识别
            </el-button>
            <el-button
              class="margin"
              :icon="iconIdentify"
              type="primary"
              @click="isClickCircularPatternRecognition('double')"
              v-if="ifShowCircleButton"
            >
              停止识别
            </el-button>
          </div>
        </div>
        <div class="center-con" v-else>
          <div class="top">
            <div class="left">
              <div class="filtered-modules-class" v-if="filteredModules[0]">
                <div>
                  {{
                    filteredModules[0]
                      ? filteredModules[0].name +
                        '-' +
                        filteredModules[0].passage
                      : ''
                  }}
                </div>
                <div
                  class="deng-icon"
                  :class="{ 'deng-icon-kai': filteredModules[0].is_light_on }"
                  @click="getClickDeng(filteredModules[0])"
                ></div>
              </div>
              <div class="sel-box">
                <div
                  v-for="item in filteredModules"
                  :key="item.module_db_id"
                  :value="item.module_db_id"
                  @click="changeModuleFn(0, item.module_db_id)"
                >
                  {{ item.name }}-{{ item.passage }}
                </div>
              </div>
            </div>
            <div class="center">
              <div class="huibackgroud">后墙</div>
            </div>
            <div class="right">
              <div class="filtered-modules-class" v-if="filteredModules[1]">
                <div>
                  {{
                    filteredModules[1]
                      ? filteredModules[1].name +
                        '-' +
                        filteredModules[1].passage
                      : ''
                  }}
                </div>
                <div
                  class="deng-icon"
                  :class="{ 'deng-icon-kai': filteredModules[1].is_light_on }"
                  @click="getClickDeng(filteredModules[1])"
                ></div>
              </div>
              <div class="sel-box">
                <div
                  v-for="item in filteredModules"
                  :key="item.module_db_id"
                  :value="item.module_db_id"
                  @click="changeModuleFn(1, item.module_db_id)"
                >
                  {{ item.name }}-{{ item.passage }}
                </div>
              </div>
            </div>
          </div>
          <div class="center-center">
            <div class="left huibackgroud">左墙</div>
            <div class="center" id="centerBox">
              <cutCirle
                ref="cutCirleRef"
                :imgFlag="imgFlag"
                @changeImgFlag="changeImgFlagFn"
                :isShowChecked="radiusChecked"
                :cx="cx"
                :cy="cy"
                :rx="rx"
                :ry="ry"
                :scaling_ratio="scaling_ratio"
              ></cutCirle>
            </div>
            <div class="right huibackgroud">右墙</div>
          </div>
          <div class="buttom">
            <div class="left">
              <div class="filtered-modules-class" v-if="filteredModules[2]">
                <div>
                  {{
                    filteredModules[2]
                      ? filteredModules[2].name +
                        '-' +
                        filteredModules[2].passage
                      : ''
                  }}
                </div>
                <div
                  class="deng-icon"
                  :class="{ 'deng-icon-kai': filteredModules[2].is_light_on }"
                  @click="getClickDeng(filteredModules[2])"
                ></div>
              </div>
              <div class="sel-box">
                <div
                  v-for="item in filteredModules"
                  :key="item.module_db_id"
                  :value="item.module_db_id"
                  @click="changeModuleFn(2, item.module_db_id)"
                >
                  {{ item.name }}-{{ item.passage }}
                </div>
              </div>
            </div>
            <div class="center">
              <div class="huibackgroud">前墙</div>
            </div>
            <div class="right">
              <div class="filtered-modules-class" v-if="filteredModules[3]">
                <div>
                  {{
                    filteredModules[3]
                      ? filteredModules[3].name +
                        '-' +
                        filteredModules[3].passage
                      : ''
                  }}
                </div>
                <div
                  class="deng-icon"
                  :class="{ 'deng-icon-kai': filteredModules[3].is_light_on }"
                  @click="getClickDeng(filteredModules[3])"
                ></div>
              </div>
              <div class="sel-box">
                <div
                  v-for="item in filteredModules"
                  :key="item.module_db_id"
                  :value="item.module_db_id"
                  @click="changeModuleFn(3, item.module_db_id)"
                >
                  {{ item.name }}-{{ item.passage }}
                </div>
              </div>
            </div>
          </div>
          <div class="center-bottom">
            <el-button
              class="margin"
              type="success"
              :icon="iconStart"
              @click="clickStartRecording()"
              :disabled="ingFlag"
            >
              开始录制
            </el-button>
            <el-button
              class="margin"
              type="danger"
              :icon="iconStop"
              @click="clickStopRecording()"
              :disabled="!ingFlag"
            >
              结束录制
            </el-button>
            <el-button
              class="margin"
              :icon="iconIdentify"
              type="primary"
              @click="clickCircularPatternRecognition()"
              :loading="dialogQYSBVisible"
              v-if="!ifShowCircleButton"
            >
              切圆识别
            </el-button>
            <el-button
              class="margin"
              :icon="iconIdentify"
              type="primary"
              v-if="ifShowCircleButton"
              @click="isClickCircularPatternRecognition()"
            >
              停止识别
            </el-button>
          </div>
          <div class="center-recording-time">{{ recordingTime }}</div>
        </div>
      </div>
      <div class="right_btn_container all-h" style="width: 20.9%">
        <div class="top">
          <el-radio-group v-model="selCombustionType" @change="changeRadio">
            <el-radio-button label="燃烧器位置" disabled class="right_btn" />
            <el-radio-button
              v-for="item in dataList.combustion_type"
              :label="`${item}层`"
              :value="item"
              class="right_btn"
            />
          </el-radio-group>
        </div>
        <div class="center"></div>
        <div class="buttom">
          <div class="right_btn_bottom" v-if="dataList.getInfo?.burner == 1">
            <span class="span_title" style="color: #0f1a58; font-weight: 700">
              切圆信息
            </span>
            <div>
              <span class="span_title">位置</span>
              <span style="color: #0f1a58; font-weight: 700">
                左切圆（{{ circularInfo.center_x }}mm,
                {{ circularInfo.center_y }}mm）
              </span>
              <br />
              <span
                style="
                  color: #0f1a58;
                  font-weight: 700;
                  margin-left: calc(2em + 10px);
                "
              >
                右切圆（{{ circularInfo.center_x }}mm,
                {{ circularInfo.center_y }}mm）
              </span>
            </div>

            <div>
              <span class="span_title">大小</span>
              <span style="color: #0f1a58; font-weight: 700">
                前后直径-左 {{ circularInfo.front_back_diameter }}mm
              </span>
              <br />

              <span
                style="
                  color: #0f1a58;
                  font-weight: 700;
                  margin-left: calc(2em + 10px);
                "
              >
                侧向直径-左 {{ circularInfo.side_diameter }}mm
              </span>
              <br />
              <span
                style="
                  color: #0f1a58;
                  font-weight: 700;
                  margin-left: calc(2em + 10px);
                "
              >
                前后直径-右 {{ circularInfo.front_back_diameter }}mm
              </span>
              <br />
              <span
                style="
                  color: #0f1a58;
                  font-weight: 700;
                  margin-left: calc(2em + 10px);
                "
              >
                侧向直径-右 {{ circularInfo.side_diameter }}mm
              </span>
              <br />
            </div>
            <div>
              <el-button class="my_btn" @click="exportCorners(1)">
                导出
              </el-button>
            </div>
          </div>
          <div class="right_btn_bottom" v-else>
            <span class="span_title" style="color: #0f1a58; font-weight: 700">
              切圆信息
            </span>
            <div>
              <span class="span_title">位置</span>
              <span style="color: #0f1a58; font-weight: 700">
                圆心（{{ showCircularInfo.center_x }}mm,
                {{ showCircularInfo.center_y }}mm）
              </span>
            </div>

            <div>
              <span class="span_title">大小</span>
              <span style="color: #0f1a58; font-weight: 700">
                前后直径 {{ showCircularInfo.front_back_diameter }}mm
              </span>
              <br />
              <span
                style="
                  color: #0f1a58;
                  font-weight: 700;
                  margin-left: calc(2em + 10px);
                "
              >
                侧向直径 {{ showCircularInfo.side_diameter }}mm
              </span>
            </div>
            <div>
              <el-button class="my_btn" @click="exportCorners(2)">
                导出
              </el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <el-dialog
    v-model="dialogCameraVisible"
    title="镜头矫正"
    :width="jingtouW + 50 + 'px'"
    :before-close="handleCameraClose"
  >
    <camera
      ref="cameraRef"
      :dialogCameraVisible="dialogCameraVisible"
      :jingtouW="jingtouW"
      :jingtouH="jingtouH"
    ></camera>
    <template #footer>
      <div class="dialog-footer">
        <el-button style="color: #0f1a58" @click="dialogCameraVisible = false">
          取消
        </el-button>
        <el-button type="primary" @click="submitCamera">确定</el-button>
      </div>
    </template>
  </el-dialog>

  <el-dialog
    v-model="dialogRotationVisible"
    title="画面旋转"
    width="700"
    :before-close="handleRotationClose"
  >
    <rotation></rotation>
    <template #footer>
      <div class="dialog-footer">
        <el-button
          style="color: #0f1a58"
          @click="dialogRotationVisible = false"
        >
          取消
        </el-button>
        <el-button type="primary" @click="dialogRotationVisible = false">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>
  <el-dialog
    v-model="dialogIgniteVisible"
    title="点火设置"
    width="700"
    :before-close="handleIgniteClose"
  >
    <div class="ignite">
      <el-row v-if="!updataIgniteModuleFlag">
        <el-col :span="12">即将对以下模块进行点火操作：</el-col>
        <el-col :span="8"></el-col>
        <el-col :span="4"></el-col>
      </el-row>
      <el-row v-else>
        <el-col :span="12">即将对以下模块进行点火操作：</el-col>
        <el-col :span="8"></el-col>
        <el-col :span="4">
          <el-button type="primary" @click="submitUpdateIgnite">确认</el-button>
        </el-col>
      </el-row>
      <div class="center" v-if="!updataIgniteModuleFlag">
        <div class="centerDiv">
          {{ modelLabel }}
          <span>
            <el-link underline="always" @click="updataIgniteModule">
              (修改点火模块)
            </el-link>
          </span>
        </div>
      </div>
      <div class="center" v-else>
        <div class="igentTable">
          <div v-for="item in ignitionTable" class="igentTr">
            <div class="igentTdTitle">{{ item.title }}</div>
            <div class="igentTd" v-for="(child, index) in item.module">
              <el-checkbox
                v-model="child.checked"
                :label="child.name + '-' + child.passage"
                size="large"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="dialog-footer-vertify">
      <vertify
        @success="ifVertify"
        :visible="dialogIgniteVertifyVisible"
      ></vertify>
      <!-- @success="vertifySuccess" -->
    </div>
    <div style="text-align: center; margin-top: 20px">
      <el-button type="primary" @click="vertifySuccess()">确认点火</el-button>
    </div>
  </el-dialog>

  <el-dialog
    v-model="dialogVideoVisible"
    title="切圆测试结果"
    width="1000"
    :before-close="handleVideoClose"
  >
    <exportCorner
      :dialogVideoVisible="dialogVideoVisible"
      :snapshots="snapshots"
      :windmill="windmill"
      @closeDialog="onChangeDialog"
      :bfVideoName="bfVideoName"
      :bfVideoId="bfVideoId"
    ></exportCorner>
  </el-dialog>
</template>
<script setup name="project">
import { toRefs, ref, nextTick, onMounted, onUnmounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import cutCirle from '../components/cutcircle.vue'
import cutCirle2 from '../components/cutcircle2.vue'
import {
  startRecording,
  stopRecording,
  correctionCorners,
  updateLocation,
  startVideo,
  stopVideo,
} from '../http/video'
import { getPorts, getListCameras } from '../http/serial'
import { getConfig, modulesAll, setConfig } from '../http/modules'
import { formatDuration } from '../utils/index'
import {
  getLocation,
  getWorkerId,
  ignition,
  recordIdInit,
  stopRealtime,
  setModeOrder,
  getExpRecordById,
} from '../http/records'
import camera from '../components/camera.vue'
import iconStart from '../components/iconStart.vue'
import iconStop from '../components/iconStop.vue'
import vertify from '../components/vertify.vue'
import rotation from '../components/rotation.vue'
import iconIdentify from '../components/iconIdentify.vue'
import { circularPatternRecognition } from '../http/records'
import exportCorner from './exportCorner.vue'
import { circularPatternExport } from '../http/records.js'
import dataListStore from '../stores/dataList'
import { useRouter, useRoute } from 'vue-router'
const route = useRoute()
const router = useRouter()
const dataList = dataListStore()
const ingFlag = ref(false)

const ifShowCircle = ref(false)

const tableH = ref(200)
const vertifyFlag = ref(false)

const cx = ref(0)
const cy = ref(0)
const rx = ref(0)
const ry = ref(0)

const cx2 = ref(0)
const cy2 = ref(0)
const rx2 = ref(0)
const ry2 = ref(0)
const scaling_ratio = ref(1)

const jingtouW = ref(0)
const jingtouH = ref(0)

const data = reactive({
  videoList: [],
  radiusChecked: false,
  total: 0,
  dialogCameraVisible: false,
  dialogRotationVisible: false,
  dialogIgniteVisible: false,
  updataIgniteModuleFlag: false,
  dialogVideoVisible: false,
  ignitionTable: [],
  modelLabel: '',
  recordingTime: '',
  recordingInterval: null,
  selCombustionType: 'A',
  filteredModules: [],
  circularInfo: {
    center_x: 0,
    center_y: 0,
    front_back_diameter: 0,
    side_diameter: 0,
  },
  showCircularInfo: {
    center_x: 0,
    center_y: 0,
    front_back_diameter: 0,
    side_diameter: 0,
  },
  dialogCameraVisibleLoading: false,
  ws: undefined,
  dialogQYSBVisible: false,
  ifShowCircleButton: false,
  bfVideoName: '',
  bfVideoId: '',
  dialogIgniteVertifyVisible: false,
})
const {
  videoList,
  radiusChecked,
  total,
  dialogCameraVisible,
  dialogRotationVisible,
  dialogIgniteVisible,
  updataIgniteModuleFlag,
  ignitionTable,
  modelLabel,
  recordingTime,
  recordingInterval,
  selCombustionType,
  filteredModules,
  dialogVideoVisible,
  circularInfo,
  dialogCameraVisibleLoading,
  ws,
  dialogQYSBVisible,
  ifShowCircleButton,
  showCircularInfo,
  bfVideoName,
  bfVideoId,
  dialogIgniteVertifyVisible,
} = toRefs(data)
const cameraRef = ref()
const cameraValue = ref()
const cameraOptions = ref([
  {
    value: '摄像头1',
    label: '摄像头1',
  },
  {
    value: '摄像头2',
    label: '摄像头2',
  },
  {
    value: '摄像头3',
    label: '摄像头3',
  },
  {
    value: '摄像头4',
    label: '摄像头4',
  },
])
const imgFlag = ref(false)
const serialPortValue = ref()
const serialPortOptions = ref([
  {
    value: '串口1',
    label: '串口',
  },
  {
    value: '串口2',
    label: '串口2',
  },
  {
    value: '串口3',
    label: '串口3',
  },
  {
    value: '串口4',
    label: '串口4',
  },
])
// const statusOptions = [
//   { value: 1, label: "启用" },
//   { value: 2, label: "禁用" },
//   { value: 3, label: "待审核" },
// ];
const cutCirleRef = ref(null)
const cutCirle2Ref = ref(null)
const statusOptions = ref([])
const resizeText = ref('刷新')
const resizeLoading = ref(false)
const checkInfoNameAndRedirect = () => {
  debugger;
  // 若已跳转过、路由实例不存在或 name 有值，直接返回
  if (dataList.getInfo && dataList.getInfo.name) {
    getListCamera()
    getIgnitionNames()
    getModulesAll(1)
    getPortsList()
    getConfigs()
    getExpRecordByIdList()
  } else {
    // 执行跳转逻辑
    ElMessage({
      type: 'warning',
      message: '试验名称不存在，即将返回首页',
    })
    router.push('/')
  }
}
const changeCamera = () => {
  const param = {
    camera_device_id: cameraValue.value,
    control_tty_id: serialPortValue.value,
  }
  setConfig(param).then((res) => {
    ElMessage({
      message: '设置摄像头成功',
      type: 'success',
    })
    if (cutCirleRef.value) {
      cutCirleRef.value.clearImgSrc()
    }
    if (cutCirle2Ref.value) {
      cutCirle2Ref.value.clearImgSrc()
    }
  })
}
const changeSerialPort = () => {
  const param = {
    camera_device_id: cameraValue.value,
    control_tty_id: serialPortValue.value,
  }
  setConfig(param).then((res) => {
    ElMessage({
      message: '设置串口成功',
      type: 'success',
    })
    if (cutCirleRef.value) {
      cutCirleRef.value.clearImgSrc()
    }
    if (cutCirle2Ref.value) {
      cutCirle2Ref.value.clearImgSrc()
    }
  })
}

function ifHas(arr, val) {
  let flag = true
  for (let i = 0; i < arr.length; i++) {
    if (arr[i].value == val) {
      flag = false
      break
    }
  }
  return flag
}

function changeModuleFn(index, id) {
  setModeOrder(dataList.getInfo.id, {
    location: selCombustionType.value,
    a_module_db_id: filteredModules.value[index].module_db_id,
    b_module_db_id: id,
  }).then((res) => {
    ElMessage({
      message: '切换成功',
      type: 'success',
    })
    changeRadio()
  })
}

//获取视频列表
function getModulesAll(type) {
  //statusOptions.value = []
  modulesAll().then((res) => {
    return new Promise((reslove, reject) => {
      if (res.status == 'success') {
        videoList.value = res.modules
        initDhData(res.modules)
        videoList.value.map((item) => {
          item.isUpdate = false
          // if (ifHas(statusOptions.value, item.location)) {
          //   statusOptions.value.push({
          //     value: item.location,
          //     label: item.location,
          //   })
          // }
        })
        // 对statusOptions进行排序
        // statusOptions.value.sort((a, b) => a.value.localeCompare(b.value))

        //  total.value = res.total_count;
        dataList.combustion_type = [
          ...new Set(videoList.value.map((m) => m.location)),
        ]
        if (type == 1) {
          getLocationInit()
        }
        if (dataList.getInfo.id) {
          changeRadio()
        }
        reslove(true)
      } else {
        reject(false)
      }
    })
  })
}

function initDhData(data) {
  ignitionTable.value = []
  let json = {}
  for (let i = 0; i < data.length; i++) {
    let item = data[i]
    let key = item.location
    let arr = json[key]
    if (!arr) {
      json[key] = []
    }
    json[key].push({
      id: item.mod_id,
      name: item.name,
      passage: item.passage,
      checked: false,
    })
  }
  let sortedKeys = Object.keys(json).sort()
  let sortedObj = {}
  sortedKeys.forEach((key) => {
    sortedObj[key] = json[key]
  })

  for (let key in sortedObj) {
    ignitionTable.value.push({
      title: key + '层',
      module: sortedObj[key],
    })
  }
}

// 更改位置
function handleChange(row) {
  updateLocation(row.id, row.location).then((res) => {
    if (res.status == 'success') {
      ElMessage({
        message: '修改成功',
        type: 'success',
        duration: 2 * 1000,
      })
    } else {
      ElMessage({
        message: '修改失败',
        type: 'success',
        duration: 2 * 1000,
      })
    }
    getModulesAll()
  })
}

function changeRadio() {
  getLocation(dataList.getInfo.id, selCombustionType.value).then((ress) => {
    if (ress.status == 'success') {
      filteredModules.value = ress.items
      for (let i = 0; i < filteredModules.value.length; i++) {
        dealDengModule(filteredModules.value[i])
      }
    }
  })
  // filteredModules.value = videoList.value.filter(
  //   module => module.location === `${selCombustionType.value}`
  // );
}
const getIgnitionNames = () => {
  modelLabel.value = ignitionTable.value
    .flatMap((layer) => layer.module) // 合并所有模块
    .filter((module) => module.checked) // 筛选 checked=true 的模块
    .map((module) => module.name) // 提取 name
    .join(', ') // 拼接成字符串
  return new Promise((reslove, reject) => {
    reslove(true)
  })
}
const getStartVideo = () => {
  imgFlag.value = false
  let param = {}
  startVideo(param).then((res) => {
    imgFlag.value = true
  })
}

const handleCameraClose = (done) => {
  done()
}
const handleRotationClose = (done) => {
  done()
}
const handleIgniteClose = (done) => {
  vertifyFlag.value = false
  done()
}
const updateCamera = () => {
  if (!imgFlag.value) {
    ElMessage({
      message: '目前视频流未播放',
      type: 'warning',
    })
    return
  }
  dialogIgniteVisible.value = false
  dialogRotationVisible.value = false
  dialogCameraVisibleLoading.value = true
  const param = {
    corners: [
      [0, 0],
      [1920, 0],
      [1920, 1080],
      [0, 1080],
    ],
    oversize: 1.2,
  }
  correctionCorners(param).then((res) => {
    dialogCameraVisibleLoading.value = false
    dialogCameraVisible.value = true
  })
}
const pictureRotation = () => {
  if (!imgFlag.value) {
    ElMessage({
      message: '目前视频流未播放',
      type: 'warning',
    })
    return
  }
  dialogIgniteVisible.value = false
  dialogRotationVisible.value = true
  dialogCameraVisible.value = false
}
const pictureignite = () => {
  if (!imgFlag.value) {
    ElMessage({
      message: '目前视频流未播放',
      type: 'warning',
    })
    return
  }
  dialogIgniteVertifyVisible.value = false
  dialogIgniteVisible.value = true
  dialogCameraVisible.value = false
  dialogRotationVisible.value = false
  setTimeout(() => {
    dialogIgniteVertifyVisible.value = true
  }, 1000)
}
const submitCamera = () => {
  if (cameraRef.value) {
    const points = cameraRef.value.getPointsPosition()
    const result = getPointsByScreen(points)
    const param = {
      corners: result,
      oversize: 1.2,
    }
    correctionCorners(param).then((res) => {
      ElMessage({
        message: '镜头矫正成功',
        type: 'success',
      })
      dialogCameraVisible.value = false
    })
  }
}

function getPointsByScreen(points) {
  let arr = []
  for (let i = 0; i < points.length; i++) {
    let item = points[i]

    let newCenter = {
      x: 960,
      y: 540,
    }

    let originalCenter = {
      x: jingtouW.value / 2,
      y: jingtouH.value / 2,
    }

    let n = newCenter.x / originalCenter.x

    let newX = newCenter.x + (item.x - originalCenter.x) * n
    let newY = newCenter.y + (item.y - originalCenter.y) * n

    arr.push([newX, newY])
  }
  return arr
  // return [
  //   [770, 340],
  //   [1140, 340],
  //   [1130, 700],
  //   [770, 700]
  // ];
}

const startDate = ref()
const stopDate = ref()
const clickStartRecording = () => {
  if (!imgFlag.value) {
    ElMessage({
      message: '目前视频流未播放',
      type: 'warning',
    })
    return
  }
  const param = {
    burner_position: selCombustionType.value,
    record_id: dataList.getInfo.id,
  }
  startRecording(param).then((res) => {
    if (res.status == true || res.status == 'success') {
      startDate.value = new Date().getTime()
      ElMessage({
        message: '开始录制',
        type: 'success',
      })
      ingFlag.value = true
      recordingInterval.value = setInterval(() => {
        const now = new Date().getTime()
        recordingTime.value = formatDuration(startDate.value, now)
      }, 10)
      bfVideoId.value = res.data.record_id
      bfVideoName.value = res.data.filename
    }
  })
}
function changeImgFlagFn() {
  imgFlag.value = true
}
const clickStopRecording = () => {
  if (!startDate.value) {
    ElMessage({
      message: '没有开始录制，无法结束录制',
      type: 'error',
      duration: 5 * 1000,
    })
    return
  }
  stopDate.value = new Date().getTime()
  const diff = stopDate.value - startDate.value
  // if (diff < 1000) {
  //   ElMessage({
  //     message: "录制时间小于1秒，无法结束录制",
  //     type: "error",
  //     duration: 5 * 1000,
  //   });
  //   return;
  // }
  clearInterval(recordingInterval.value)
  recordingTime.value = ''
  const time = formatDuration(startDate.value, stopDate.value)
  ElMessageBox.confirm(`视频已录制${time},是否结束录制`, '结束录制', {
    confirmButtonText: '结束录制',
    cancelButtonText: '取消',
    cancelButtonClass: 'button-cancel',
  })
    .then(() => {
      stopRecording().then((res) => {
        if (res.status == 'success') {
          ingFlag.value = false
          ws.value?.close()
          ElMessage({
            message: '保存成功',
            type: 'success',
          })
        }
      })
    })
    .catch(() => {})
  // stopRecording().then((res) => {
  //   if (res.success == true) {
  //     stopDate.value = new Date().getTime();
  //   }
  // });
}

const ifVertify = () => {
  vertifyFlag.value = true
}
const vertifySuccess = (e) => {
  if (!vertifyFlag.value) {
    ElMessage({
      type: 'warning',
      message: '请先滑动滑块',
    })
    return
  }
  // const checkedIds = ignitionTable.value
  //   .flatMap(layer => layer.module) // 将多层模块合并为一个数组
  //   .filter(module => module.checked) // 筛选 checked 为 true 的模块
  //   .map(module => module.id);
  //   console.log("ignitionTable",ignitionTable.value);

  const checkedIds = []
  // 遍历每个层级
  ignitionTable.value.forEach((level) => {
    // 遍历当前层级的所有模块
    level.module.forEach((module) => {
      // 只处理checked为true的模块
      if (module.checked) {
        // 根据passage值确定command_type
        const commandType = module.passage === 1 ? 4 : 5

        // 添加到结果数组
        checkedIds.push({
          module_id: module.id,
          command_type: commandType,
        })
      }
    })
  })
  const param = {
    module_commands: checkedIds,
  }
  ignition(param)
    .then((res) => {
      if (res.status == 'success') {
        ElMessage({
          type: 'success',
          message: res.data.results,
        })
        dialogIgniteVertifyVisible.value = false
        setTimeout(() => {
          dialogIgniteVertifyVisible.value = true
        }, 1000)
        dialogIgniteVisible.value = false
      } else {
        dialogIgniteVertifyVisible.value = false
        ElMessage({
          type: 'error',
          message: res.detail,
        })
        setTimeout(() => {
          dialogIgniteVertifyVisible.value = true
        }, 1000)
      }
    })
    .catch((err) => {
      dialogIgniteVertifyVisible.value = false

      ElMessage({
        type: 'error',
        message: err.response.data.detail,
      })
      setTimeout(() => {
        dialogIgniteVertifyVisible.value = true
      }, 1000)
    })
}
const updataIgniteModule = () => {
  updataIgniteModuleFlag.value = true
}
const submitUpdateIgnite = () => {
  getIgnitionNames()
  updataIgniteModuleFlag.value = false
}

const getPortsList = () => {
  serialPortOptions.value = []
  getPorts().then((res) => {
    return new Promise((reslove, reject) => {
      if (res.status == 'success') {
        if (res.ports.length > 0) {
          res.ports.forEach((item) => {
            const param = {
              value: item,
              label: item,
            }
            serialPortOptions.value.push(param)
          })
        }
        reslove(true)
      } else {
        reject(false)
      }
    })
  })
}

const getListCamera = (type) => {
  cameraOptions.value = []
  getListCameras().then((res) => {
    return new Promise((reslove, reject) => {
      if (res.status == 'success') {
        res.cameras.forEach((item) => {
          const param = {
            value: item,
            label: item,
          }
          cameraOptions.value.push(param)
        })
        if (type != 1) {
          initVideoFn()
        }
        reslove(true)
      } else {
        reject(false)
      }
    })
  })
}

function initProgressWs(worker_id) {
  //这个接口其实没用
  ws.value = new WebSocket(
    `ws://113.44.105.79:8080/ws/circular_pattern/${worker_id}`,
  )
  ws.value.onopen = function (evt) {
    console.log('Connection open.')
  }
  ws.value.onmessage = function (evt) {
    // loading.value = false;
    let res = JSON.parse(evt.data)
    if (res.type == 'initialized') {
      ElMessage({
        message: '切圆识别成功',
        type: 'success',
      })
      dialogQYSBVisible.value = false
    }
    if (res.type == 'video_file_ended') {
      ifShowCircleButton.value = false
      dialogQYSBVisible.value = false
      radiusChecked.value = false
      ifShowCircle.value = false
      ws.value.close()
    }
    if (res.type == 'circular_pattern_result') {
      ifShowCircle.value = true
      circularInfo.value.center_x = Math.floor(res.draw_info.center_x)
      circularInfo.value.center_y = Math.floor(res.draw_info.center_y)
      circularInfo.value.front_back_diameter = Math.floor(
        res.draw_info.front_back_diameter,
      )
      circularInfo.value.side_diameter = Math.floor(res.draw_info.side_diameter)
      showCircularInfo.value.center_x = Math.floor(res.show_info.center_x)
      showCircularInfo.value.center_y = Math.floor(res.show_info.center_y)
      showCircularInfo.value.front_back_diameter = Math.floor(
        res.show_info.front_back_diameter,
      )
      showCircularInfo.value.side_diameter = Math.floor(
        res.show_info.side_diameter,
      )
      // 切圆识别 4-8
      cx2.value = res.draw_info.center_x
      cy2.value = res.draw_info.center_y
      rx2.value = res.draw_info.side_diameter
      ry2.value = res.draw_info.front_back_diameter

      debugger

      if(res.show_info){
        cx.value = res.show_info.center_x
        cy.value = res.show_info.center_y
        rx.value = res.show_info.side_diameter
        ry.value = res.show_info.front_back_diameter
      }
      scaling_ratio.value = res.draw_info.scaling_ratio
    }
  }
  ws.value.onclose = function (evt) {}
}

const clickCircularPatternRecognition = (type) => {
  ifShowCircle.value = false
  dataList.circularFlag = false
  let param = { force_align: true, revise_y: true, soft_update: true }
  if (type == 'double') {
    param = {
      force_align: true,
      revise_y: true,
      soft_update: true,
      ellipse_mode: 'single',
    }
  }
  dialogQYSBVisible.value = true
  getWorkerId(param).then((res) => {
    if (res.status == 'success') {
      let workerId = res.data.worker_id
      initProgressWs(workerId)
      ifShowCircleButton.value = true
    }
    if (res.status == 'error') {
      ElMessage({
        message: res.detail,
        type: 'error',
      })
      dialogQYSBVisible.value = false
    }
  })
}
const isClickCircularPatternRecognition = () => {
  if (!imgFlag.value) {
    ElMessage({
      message: '目前视频流未播放',
      type: 'warning',
    })
    return
  }
  stopRealtime().then((res) => {
    ifShowCircleButton.value = false
    radiusChecked.value = false
    ifShowCircle.value = false
    ws.value.close()
  })
}

const getClickDeng = (row) => {
  let param = {
    module_commands: [
      {
        command_type: row.is_light_on ? 2 : 1,
        module_id: row.mod_id,
      },
    ],
  }
  ignition(param).then((res) => {
    const type = row.is_light_on ? '关灯' : '开灯'
    const msg = `${type}成功`
    ElMessage({
      message: msg,
      type: 'success',
    })
    row.is_light_on = type == '开灯' ? true : false
    dealModule(row.mod_id, type)

    // getModulesAll();
  })
}

function dealDengModule(item) {
  for (let i = 0; i < videoList.value.length; i++) {
    if (videoList.value[i].mod_id == item.mod_id) {
      item.is_light_on = videoList.value[i].is_light_on
      break
    }
  }
}
function dealModule(id, type) {
  for (let i = 0; i < videoList.value.length; i++) {
    if (videoList.value[i].mod_id == id) {
      let json = {
        ...videoList.value[i],
        is_light_on: type == '开灯' ? true : false,
      }
      videoList.value[i] = json
      break
    }
  }
}

const exportCorners = (type) => {
  dialogVideoVisible.value = true
  //exportCircular();
}
const handleVideoClose = () => {
  dialogVideoVisible.value = false
}

const onChangeDialog = () => {
  dialogVideoVisible.value = false
}
const pollingCircularPatternRecognition = () => {
  const param = { force_align: true, revise_y: true, soft_update: true }
  circularPatternRecognition(param)
    .then((res) => {
      if (res.status == 'success') {
        circularInfo.value.center_x = Math.floor(res.center_x)
        circularInfo.value.center_y = Math.floor(res.center_y)
        circularInfo.value.front_back_diameter = Math.floor(
          res.front_back_diameter,
        )
        circularInfo.value.side_diameter = Math.floor(res.side_diameter)
      }
    })
    .catch((err) => {})
}
const getConfigs = () => {
  getConfig().then((res) => {
    return new Promise((reslove, reject) => {
      if (res.status == 'success') {
        cameraValue.value = res.camera_device_id
        serialPortValue.value = res.control_tty_id
        reslove(true)
      } else {
        reject(false)
      }
    })
  })
}
const snapshots = ref([])
const windmill = ref()

const exportCircular = () => {
  const param = {
    force_align: true,
    revise_y: true,
    soft_update: true,
  }
  circularPatternExport(param).then((res) => {
    console.log('res', res)
    windmill.value = res.windmill
    snapshots.value = res.snapshots
  })
}

const initVideoFn = () => {
  stopVideo().then((res) => {
    imgFlag.value = false
    getStartVideo()
  })
}

const resize = (type) => {
  if (type == 1) {
    resizeText.value = '刷新中'
    resizeLoading.value = true
  }
  getIgnitionNames()
    .then((res) => {
      return getModulesAll()
    })
    .then((res) => {
      return getPortsList()
    })
    .then((res) => {
      return getListCamera(type)
    })
    .then((res) => {
      return getConfigs()
    })
    .then((res) => {
      return getExpRecordByIdList()
    })
    .then((res) => {
      if (type == 1) {
        setTimeout(() => {
          resizeText.value = '刷新'
          resizeLoading.value = false
        }, 3000)
      }
    })
}
checkInfoNameAndRedirect()
watch(
  () => route.path,
  (oldVal, newVal) => {
    if (oldVal == '/project') {
      resize()
    }
  },
)

function getExpRecordByIdList(){
  getExpRecordById(dataList.getInfo.id).then((res) => {
    return new Promise((reslove, reject) => {
      if (res.status == 'success') {
        const combustion_modes = JSON.parse(res.record.combustion_mode)
        combustion_modes.map((item) => {
          let child = item.split('层')[0]
          statusOptions.value.push({
            value: child,
            label: child,
          })
        })
        statusOptions.value.sort((a, b) => a.value.localeCompare(b.value))
        reslove(true)
      } else {
        reject(false)
      }
    })
  })
}
function getLocationInit(){
  if (dataList.getInfo.id) {
    recordIdInit(dataList.getInfo.id).then((res) => {})
  }
}

const handleDblClick = (row, field) => {
  videoList.value.forEach((item) => {
    item.isUpdate = false
  })
  row.isUpdate = true
}

function getTableHeight() {
  nextTick(() => {
    tableH.value = document.getElementById('tableBox').clientHeight
  })
}

onMounted(() => {
  nextTick(() => {
    let boxW = undefined
    if (dataList.getInfo?.burner == 1) {
      boxW = document.getElementById('centerBox2').offsetWidth
    } else {
      boxW = document.getElementById('centerBox').offsetWidth
    }
    let boxH = (1080 * boxW) / 1920
    jingtouW.value = boxW * 1.5
    jingtouH.value = boxH * 1.5
  })
  getTableHeight()
})
</script>
<style lang="scss" scoped>
.project {
  height: 100%;
  .top-top-buttom {
    position: relative;
    .bj-module {
      .sel-box {
        left: 0.5rem;
      }
      &:hover {
        .sel-box {
          display: block;
        }
      }
    }
  }
  .sel-box {
    display: none;
    position: absolute;
    left: 2rem;
    top: 2rem;
    width: 8rem;
    padding: 0 1rem;
    text-align: center;
    background-color: #fff;
    border: 1px solid #f2f2f2;
    z-index: 9999;
    > div {
      height: 2.5rem;
      line-height: 2.5rem;
      border-bottom: 1px solid #f2f2f2;
      padding: 0 0.5rem;
      cursor: pointer;
      color: #333;
      &:hover {
        color: #409eff;
      }
    }
  }
  .in-box {
    width: 100%;
    height: 100%;
    display: flex;
    margin-left: 10px;
    margin-right: 10px;
    .all-h {
      padding-right: 10px;
      padding-left: 10px;
    }
  }

  /* 基础样式 - 1K (1920x1080) */
  .info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 3rem; /* ≈4.2vh 转换为固定rem值 */
    .top-info {
      display: flex;
      align-items: center;
    }
    p {
      span:nth-child(1) {
        color: #aaaaaa;
        font-size: 0.875rem; /* 14px */
      }
      span:nth-child(2) {
        color: #0f1a58;
        font-size: 0.875rem; /* 14px */
      }
    }
    .margin {
      margin: 0 1.5rem; /* 替换vw单位 */
      color: #4f52bb;
      font-size: 0.875rem; /* 14px */
    }
  }

  .table {
    height: calc(100% - 3rem);
    border: 1px solid #c1caeb;
    border-radius: 0.375rem; /* 6px */
    overflow: hidden;
    overflow-y: auto;
    .connected {
      font-size: 0.875rem; /* 14px */
      color: #4f52bb;
      line-height: 1.25rem; /* 20px */
    }

    .connectedErr {
      color: #ff4d4f;
    }
  }

  .center-info {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 2.5rem; /* ≈3.4vh */
    margin-bottom: 0.625rem; /* ≈0.9vh */

    .margin {
      margin: 0 1.5rem; /* 替换vw单位 */
      color: #4f52bb;
      font-size: 0.875rem; /* 14px */
    }
  }

  .center-bottom {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 2rem; /* ≈2.7vh */
    margin: 1.25rem 0; /* ≈1.8vh 和 0.9vh */
  }

  .center-recording-time {
    font-size: 0.75rem; /* 12px - 替换vw单位 */
    color: #000000;
  }
  .center-con-con {
    width: 100%;
    height: calc(100% - 3rem);
    border: 1px solid #c1caeb;
    border-radius: 0.375rem; /* 6px */
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: column;
    padding: 1rem;
    .top {
      width: 100%;
      height: 90%;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-flow: column;
      padding: 1rem;
      .top-top,
      .top-bottom {
        width: 100%;
        height: 15%;
        .top-top-top,
        .top-top-buttom {
          width: 100%;
          height: 49%;
          display: flex;
          .huibackgroud {
            width: 4rem; /* ≈3.3vw */
            height: 2rem; /* ≈2.9vh */
            background: rgba(170, 170, 170, 0.15);
            border-radius: 0.375rem; /* 6px */
            font-weight: 500;
            font-size: 0.8rem; /* 12px - 替换vw */
            color: #aaaaaa;
            line-height: 1.25rem; /* ≈1.8vh */
            padding: 0 0.5rem;
            display: flex;
            justify-content: center;
            align-items: center;
          }

          .filtered-modules-class {
            width: 9rem; /* ≈5.2vw */
            height: 2rem; /* ≈2.9vh */
            background: rgba(79, 82, 187, 0.15);
            border-radius: 0.375rem; /* 6px */
            font-weight: 500;
            font-size: 0.75rem; /* 12px - 替换vw */
            color: #0f1a58;
            line-height: 1.25rem; /* ≈1.8vh */
            padding: 0 0.5rem;
            display: flex;
            justify-content: center;
            align-items: center;
          }
        }
        .top-top-top {
          justify-content: center;
          align-items: center;
        }
        .top-top-buttom {
          justify-content: space-around;
          align-items: center;
        }
      }
      .center {
        width: 100%;
        height: 70%;
        display: flex;
        justify-content: center;
        align-items: center;
        .center-center {
          width: 80%;
          border: 1px solid #c1caeb;
          border-radius: 0.375rem; /* 6px */
        }
        .huibackgroud {
          width: 4rem; /* ≈3.3vw */
          height: 2rem; /* ≈2.9vh */
          background: rgba(170, 170, 170, 0.15);
          border-radius: 0.375rem; /* 6px */
          font-weight: 500;
          font-size: 0.8rem; /* 12px - 替换vw */
          color: #aaaaaa;
          line-height: 1.25rem; /* ≈1.8vh */
          padding: 0 0.5rem;
          display: flex;
          justify-content: center;
          align-items: center;
          margin: 0.5rem 0.5rem;
        }
      }
    }
    .bottom {
      width: 100%;
      height: 10%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
  .center-con {
    height: calc(100% - 3rem);
    border: 1px solid #c1caeb;
    border-radius: 0.375rem; /* 6px */
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: column;
    padding: 1rem;
    .top,
    .buttom {
      .left,
      .center,
      .right {
        position: relative;
        &:hover {
          .sel-box {
            display: block;
          }
        }
      }
    }

    .top,
    .center-center,
    .buttom {
      display: flex;
      justify-content: center;
      align-items: center;
      color: #000;
      width: 100%;
      margin: 0.5rem 0;

      .left,
      .center,
      .right {
        margin: 0.25rem; /* 4px */
      }
      .left,
      .right {
        width: 16%;
      }
      .left {
        display: flex;
        justify-content: end;
        align-items: center;
      }
      .center {
        width: 68%; /* 替换31vw */
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .huibackgroud {
        width: 4rem; /* ≈3.3vw */
        height: 2rem; /* ≈2.9vh */
        background: rgba(170, 170, 170, 0.15);
        border-radius: 0.375rem; /* 6px */
        font-weight: 500;
        font-size: 0.8rem; /* 12px - 替换vw */
        color: #aaaaaa;
        line-height: 1.25rem; /* ≈1.8vh */
        padding: 0 0.5rem;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .filtered-modules-class {
        width: 9rem; /* ≈5.2vw */
        height: 2rem; /* ≈2.9vh */
        background: rgba(79, 82, 187, 0.15);
        border-radius: 0.375rem; /* 6px */
        font-weight: 500;
        font-size: 0.75rem; /* 12px - 替换vw */
        color: #0f1a58;
        line-height: 1.25rem; /* ≈1.8vh */
        padding: 0 0.5rem;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
    .center-center {
      .center {
        width: 68%;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
  }

  .right_btn_container {
    display: flex;
    flex-direction: column;
    margin-top: 2.5rem; /* ≈3.7vh */
    justify-content: space-between;
    .top {
      width: 17.125rem;
      height: 21.1875rem;
      .el-radio-group {
        width: 100%;
      }
    }
    .right_btn {
      width: 100%; /* ≈13.2vw */
      height: 3rem; /* ≈4.4vh */
      border: 1px solid #c1caeb;
      border-bottom: none;

      &:last-child {
        border-bottom: 1px solid #c1caeb;
      }

      :deep() {
        .el-radio-button__inner {
          width: 100%;
          height: 100%;
          border: none;
          line-height: 3rem;
          font-size: 0.875rem; /* 14px */
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }
    }

    .right_btn_bottom {
      border: 1px solid #c1caeb;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      width: 17.875rem; /* 254px */
      height: 16.9375rem; /* 271px */
      background: #ffffff;
      border-radius: 0.375rem; /* 6px */
      padding: 1.25rem; /* 20px */
    }

    .span_title {
      margin-right: 0.625rem; /* 10px */
      text-align: left;
      display: inline-block;
      font-size: 0.875rem; /* 14px */
    }
  }
}

.my_btn {
  width: 4rem; /* ≈3.3vw */
  height: 2rem; /* ≈2.9vh */
  background: #4f52bb;
  color: #fff;
  border-radius: 0.375rem; /* 6px */
  margin-left: 50%;
  transform: translateX(-50%);
  font-size: 0.75rem; /* 12px */
}

/* 2K (2560x1440) 适配 */
@media screen and (min-width: 1921px) and (max-width: 2560px) {
  .project {
    .info,
    .center-info,
    .center-bottom {
      height: 3.5rem;
    }

    .table,
    .center-con {
      height: calc(100% - 3.5rem);
    }

    .center-recording-time {
      font-size: 0.875rem;
    }

    .center-con {
      .huibackgroud,
      .filtered-modules-class {
        font-size: 0.875rem;
        height: 2.5rem;
      }
    }

    .right_btn_container {
      .right_btn {
        width: 14rem;
        height: 3.5rem;

        :deep() {
          .el-radio-button__inner {
            font-size: 1rem;
            line-height: 3.5rem;
          }
        }
      }

      .right_btn_bottom {
        width: 18rem;
        height: 20rem;
      }

      .span_title {
        font-size: 1rem;
      }
    }
  }

  .my_btn {
    width: 5rem;
    height: 2.5rem;
    font-size: 0.875rem;
  }
}

/* 2.5K (2560x1600) 适配 */
@media screen and (min-width: 2561px) and (max-width: 2880px) {
  .project {
    .info,
    .center-info,
    .center-bottom {
      height: 4rem;
    }

    .table,
    .center-con {
      height: calc(100% - 4rem);
    }

    .center-recording-time {
      font-size: 1rem;
    }

    .center-con {
      .huibackgroud,
      .filtered-modules-class {
        font-size: 1rem;
        height: 3rem;
      }
    }

    .right_btn_container {
      .right_btn {
        width: 16rem;
        height: 4rem;

        :deep() {
          .el-radio-button__inner {
            font-size: 1.125rem;
            line-height: 4rem;
          }
        }
      }

      .right_btn_bottom {
        width: 22rem;
        height: 24rem;
      }

      .span_title {
        font-size: 1.125rem;
      }
    }
  }

  .my_btn {
    width: 6rem;
    height: 3rem;
    font-size: 1rem;
  }
}

/* 4K (3840x2160) 适配 */
@media screen and (min-width: 2881px) {
  .project {
    .info,
    .center-info,
    .center-bottom {
      height: 5rem;
    }

    .table,
    .center-con {
      height: calc(100% - 5rem);
    }

    .center-recording-time {
      font-size: 1.25rem;
    }

    .center-con {
      .huibackgroud,
      .filtered-modules-class {
        font-size: 1.25rem;
        height: 4rem;
        width: 8rem;
      }

      .filtered-modules-class {
        width: 10rem;
      }
    }

    .right_btn_container {
      .right_btn {
        width: 20rem;
        height: 5rem;

        :deep() {
          .el-radio-button__inner {
            font-size: 1.5rem;
            line-height: 5rem;
          }
        }
      }

      .right_btn_bottom {
        width: 28rem;
        height: 30rem;
        padding: 2rem;
      }

      .span_title {
        font-size: 1.5rem;
      }
    }
  }

  .my_btn {
    width: 8rem;
    height: 4rem;
    font-size: 1.25rem;
  }
}

/* 小屏幕适配 (可选) */
@media screen and (max-width: 1366px) {
  .project {
    .info,
    .center-info,
    .center-bottom {
      height: 2.5rem;
    }

    .table,
    .center-con {
      height: calc(100% - 2.5rem);
    }

    .center-con {
      .huibackgroud,
      .filtered-modules-class {
        height: 1.8rem;
        font-size: 0.625rem;
      }
    }
  }

  .my_btn {
    width: 3rem;
    height: 1.8rem;
    font-size: 0.625rem;
  }
}
</style>
<style lang="scss">
.ignite {
  padding: 30px !important;
  .el-row {
    margin: 16px 0;
    font-size: 14px;
    color: #0f1a58;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .center {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    border: 1px solid #c1caeb;
    border-radius: 6px;
    background-color: #f5f7fb;
    .centerDiv {
      line-height: 50px;
    }
  }
  .el-link {
    .el-link__inner {
      font-size: 14px;
      color: #4f52bb;
    }
  }
}
.dialog-footer-vertify {
  display: flex;
  justify-content: center;
  align-items: center;
}

.igentTable {
  width: 100%;
  border-collapse: collapse;
}
.igentTr {
  border: 1px solid #ddd;
  display: flex;
  align-items: center;
}
.igentTr,
.igentTd {
  padding: 8px;
  text-align: center; /* 使文本对齐方式为左对齐 */
}
.igentTdTitle {
  width: 57px;
  border: 1px solid #c1caeb;
  background: #f5f7fb;
  font-size: 14px;
  color: #aaaaaa;
  line-height: 20px;
}
.button-cancel {
  color: #4f52bb;
}
.name-column {
  display: flex;
  justify-content: center;
  align-items: center;
}
.deng-icon {
  width: 16px;
  height: 16px;
  background: url('../assets/img/guandeng.png') center center no-repeat;
  background-size: cover;
  margin-left: 3px;
  cursor: pointer;
}
.deng-icon-kai {
  background: url('../assets/img/kaideng.png') center center no-repeat;
  background-size: cover;
}
</style>
